<template>
  <view class="goodsList tn-safe-area-inset-bottom">
    <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false"
      >商品列表</tn-navbar
    >

    <tn-sticky :custom-navbar-height="customNavbar.height">
      <view class="goodsList-sort tn-flex-row">
        <view
          v-for="sort in sortData"
          class="goodsList-sort-item tn-flex-1"
          v-on:click="sortClick(sort.name, sort.sortStatus)"
        >
          <view
            class="goodsList-sort-item-text"
            :class="sort.status == 0 ? '' : 'tn-color-main'"
            >{{ sort.chineseName }}</view
          >
          <view class="goodsList-sort-item-icon tn-flex-column">
            <tn-icon
              :class="sort.status == 0 ? '' : 'tn-color-main'"
              :icon="sort.sortStatus == 0 ? 'down-triangle' : 'up-triangle'"
            ></tn-icon>
          </view>
        </view>
      </view>
    </tn-sticky>
    <view class="goodsList-content tn-flex-center tn-flex-wrap">
      <tn-water-fall ref="goodsListRef" v-model="goodsList">
        <template v-slot:left="{ data }">
          <goods-card
            v-for="(item, index) in data"
            :key="index"
            :goods="item"
            @click="goodsClick"
          ></goods-card>
        </template>
        <template v-slot:right="{ data }">
          <goods-card
            v-for="(item, index) in data"
            :key="index"
            :goods="item"
            @click="goodsClick"
          ></goods-card>
        </template>
      </tn-water-fall>
      <view>
        <tn-empty :show="emptyGoodsList" mode="data"></tn-empty>
      </view>
      <tn-load-more :status="loadingStatus"></tn-load-more>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { onReachBottom, onLoad } from "@dcloudio/uni-app";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
// 获取自定义顶部导航栏的高度
import useSystemInfo from "@/tuniao-ui/libs/hooks/useSystemInfo";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import TnSticky from "@/tuniao-ui/components/tn-sticky/src/Sticky.vue";
import TnEmpty from "@/tuniao-ui/components/tn-empty/src/Empty.vue";
import TnWaterFall from "@/tuniao-ui/components/tn-waterfall/src/WaterFall.vue";
import TnLoadMore from "@/tuniao-ui/components/tn-load-more/src/LoadMore.vue";
import { navPage } from "@/tuniao-ui/utils";
import { LoadMoreStatus } from "@/tuniao-ui/types/tn-load-more";
import { findGoodsPage } from "@/api/goods";
import { Goods } from "./lib/types";
import GoodsCard from "./lib/component/GoodsCard.vue";

const { customNavbar } = useSystemInfo();

const goodsListRef = ref(); // 水平瀑布流组件
const currentPage = ref(1);
const pageSize = ref(10);
const haveData = ref(true); // 是否还有更多数据

const goodsList = ref<Goods[]>([]);

// 加载状态
let loadingStatus = ref<LoadMoreStatus>("nomore");

// 分类id 从分类页传递过来
const classifyId = ref(0);
// 标记是否有数据
const emptyGoodsList = ref(false);

// 排序数据
const sortData = ref([
  {
    name: "default",
    chineseName: "默认",
    sortStatus: 0, //图标状态0 低到高，1高到低
    status: 1, //选中状态0 未选中，1选中
  },
  {
    name: "create",
    chineseName: "新品",
    sortStatus: 0, //图标状态0 低到高，1高到低
    status: 0, //选中状态0 未选中，1选中
  },
  {
    name: "price",
    chineseName: "价格",
    sortStatus: 0, //图标状态0 低到高，1高到低
    status: 0, //选中状态0 未选中，1选中
  },
  {
    name: "eva", //
    chineseName: "好评",
    sortStatus: 0, //图标状态0 低到高，1高到低
    status: 0, //选中状态0 未选中，1选中
  },
]);

onLoad((options: any) => {
  classifyId.value = options.classifyId;
});

onMounted(() => {
  loadMoreGoods();
});

// 页面刷到底部
onReachBottom(() => {
  loadMoreGoods();
});

/**
 * 商品单击事件
 * @param goodsId 商品id
 */
function goodsClick(goodsId: any) {
  console.log(goodsId);
  navPage("/pages/goods/goods?goodsId=" + goodsId);
}

/**
 * 排序单击事件
 * @param sortName 排序字段名
 * @param sortStatus 排序方式 0正序，1倒序
 */
function sortClick(sortName: string, sortStatus: number) {
  console.log(sortName, sortStatus);

  // 清空数据 重新查询
  goodsList.value = [];
  goodsListRef.value.clear(); // 子组件清空瀑布流数据
  currentPage.value = 1;
  haveData.value = true;
  loadMoreGoods({ sortName, sortType: sortStatus === 0 ? "asc" : "desc" });

  console.log(goodsList.value);
  sortData.value.forEach((sort, index, arr) => {
    if (sort.name == sortName) {
      sort.status = 1;
      sort.sortStatus = sortStatus === 0 ? 1 : 0;
    } else {
      sort.status = 0;
    }
  });
}

async function loadMoreGoods(params?: any) {
  if (!haveData.value) {
    return;
  }
  loadingStatus.value = "loading";

  // 如果有分类
  if (classifyId.value != 0) {
    params = { ...params, goodsClassifyId: classifyId.value };
  }

  const { code, result } = await findGoodsPage({
    current: currentPage.value,
    size: pageSize.value,
    ...params,
  });
  if (code === 200) {
    if (result.records.length < 1) {
      //loadingStatus.value = "nomore";
      console.log("没有更多数据了");
      haveData.value = false; // 标记无数据了
      if (currentPage.value == 1) {
        emptyGoodsList.value = true;
      }
    }
    goodsList.value = goodsList.value.concat(result.records);
    currentPage.value++;
  }
  loadingStatus.value = "nomore";
  //console.log(goodsList.value);
  //console.log(result);
}
</script>

<style lang="scss" scoped>
.goodsList {
  &-sort {
    height: 40px;
    background-color: #fff;
    &-item {
      align-items: center;
      justify-content: center;
      &-text {
        font-size: 26rpx;
      }
    }
  }

  &-content {
    margin-top: 20rpx;
  }
}
</style>
